<template>
  <view class="sku_container">
    <view class="sku_modal">
      <view class="sku_header">
          <text class="sku_title">请选择商品规格</text>
          <text class="sku_close-btn" @click="closeModal">×</text>
        </view>
      <view class="sku_product-info">
        <image class="sku_product-image" src="https://safood.supplyocta.com/Uploads/Star/20240718/7XAP1M83O85TE6HO.jpg"></image>
        <view class="sku_product-details">
          <text class="sku_product-name">复古行李箱梦香猪框框万向轮高颜值</text>
          <view class="sku_tags">
            <text class="sku_tag">18吋</text>
            <text class="sku_tag">前置挂钩</text>
            <text class="sku_tag">男女通用</text>
          </view>
          <text class="sku_price">¥640.00</text>
        </view>
      </view>
      <view class="sku_size-selection">
        <text class="sku_size-title">尺寸</text>
        <view class="sku_size-options">
          <view
            v-for="size in sizes"
            :key="size.value"
            :class="['sku_size-option', { 'sku_selected': selectedSize === size.value, 'sku_disabled': size.disabled }]"
            @click="selectSize(size.value)"
          >
            <text v-if="size.disabled" class="sku_size-text sku_disabled-text">{{ size.label }}</text>
            <text v-else>{{ size.label }}</text>
            <text v-if="size.disabled" class="sku_out-of-stock">缺货</text>
          </view>
        </view>
      </view>
      <view class="sku_quantity-selection">
        <view style="display: flex; justify-content: space-between;align-items: center;">
          <text class="sku_quantity-title">数量</text>
        <view class="sku_quantity-control">
          <button class="sku_quantity-btn" @click="decrementQuantity">-</button>
          <text class="sku_quantity">{{ quantity }}</text>
          <button class="sku_quantity-btn" @click="incrementQuantity">+</button>
        </view>
        </view>
      </view>
      <button class="sku_add-to-cart" @click="addToCart">加入购物车</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedSize: '19寸',
      quantity: 1,
      sizes: [
        { label: '19寸19寸19寸19寸', value: '19寸' },
        { label: '20寸20寸20寸', value: '20寸' },
        { label: '22寸20寸', value: '22寸' },
        { label: '24寸20寸', value: '24寸' },
        { label: '28寸20寸', value: '28寸', disabled: true },
      ],
    };
  },
  methods: {
    closeModal() {
      // 关闭弹窗逻辑
    },
    selectSize(size) {
      if (!this.sizes.find(s => s.value === size).disabled) {
        this.selectedSize = size;
      }
    },
    decrementQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    incrementQuantity() {
      this.quantity++;
    },
    addToCart() {
      // 加入购物车逻辑
    },
  },
};
</script>

<style >
@import "./SkuDetailsCard.scss";
</style>
